<template>
	
	<template v-if="showGender">
		
		<view class="username" :style="{
			'textAlign':align,
			'color':color
		}">
			<text class="username-text" :style="{
				'fontSize':fontSize
			}">{{username}}</text>
			<userGenderIcon :gender="gender" size="45rpx"></userGenderIcon>
		</view>
	</template>
	<template v-else>
		<text class="username-text" :style="{
			'fontSize':fontSize,
			'color':color
		}">{{username}}</text>
	</template>

</template>

<script setup>
	import userGenderIcon from '@/components/user_gender_icon/user_gender_icon.vue'
	import {
		defineProps,
	} from 'vue';

	defineProps({
		align: {
			type: String || Number,
			default: "left"
		},
		
		showGender: {
			type: Boolean,
			default: false
		},
		
		gender: {
			type: String || Number,
			default: 0
		},
		'tag': {
			type: String || Number,
			default: ""
		},
		tagColor: {
			type: String,
			default: ""
		},
		username: {
			type: String,
			default: ""
		},
		fontSize: {
			type: String,
			default: "30rpx"
		},
		plain: {
			type: Boolean,
			default: false
		},
		color: {
			type: String,
			default: "black"
		}
	})
</script>

<style scoped>
	.username {
		text-align: left;
		padding: 0rpx;
		margin: 0px;
		display: inline-block;
	}

	.username-text {
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
		margin-right: 7rpx;
	}

	.username-tag {
		margin-right: 10rpx;
		overflow: hidden;
	}
</style>